<template>

  <div class="infinite-list-wrapper" style="overflow:auto">
    <ul
      class="list"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled">
      <li v-for="i in blogs" :key="i._id" class="article" style="display:block">
        <div style="text-align: center;width: 100%;">
          <router-link :to="{name: 'ArticleDetail', params: {id: i._id}}" class="ttitle">{{i.title}}</router-link>
        </div>
        <div class="content">
          <img :src="'/images/' + i.avatar" class="avatar">
        </div>
        <div>
          {{i.username}}：{{i.content}}
        </div>
      </li>
    </ul>
    <p v-if="loading"><el-skeleton /></p>
    <p v-if="noMore">没有更多了</p>

  </div>


</template>

<script>
import {getBlogs} from "../api/api";
export default {
  name: "ArticleList",

  data () {
    return {

      blogs: [],
      loading: false,
      url: '/api/article/page',
      curPage: 0,
    }
  },

  mounted() {
    this.loadBooks()
  },

  computed: {
      noMore () {
        return !this.nextUrl
      },
      disabled () {
        return this.loading || this.noMore
      }
    },

  methods: {
    loadBooks() {
      getBlogs(this.url + this.curPage).then(response => {
        const data = response.data.data
        console.log(data)
        if(data) {
          this.blogs = this.blogs.concat(data)
          console.log(this.blogs)
          this.curPage ++
        }
        else {
          this.url = null
        }
      })
    },

    load () {
      this.loading = true
        setTimeout(() => {
          if(this.url != null){
            this.loadBooks()
          }
          this.loading = false
        }, 2000)
      }

  },

}
</script>

<style scoped>

ul {
  margin: 0;
  padding-inline-start: 0;
}

p {
  text-align: center;
}







</style>
